<template>
	<view class="page">
		
	    <view class="register-form">
	        <view class="input-container">
	        	<view class="">旧密码：</view><input type="password" placeholder="请输入旧密码" v-model="password" auto-focus>
	        </view>
	        <view class="input-container">
	        	<view>新密码：</view><input type="password" placeholder="请输入新密码" v-model="newPassword">
	        </view>
			<view class="input-container">
				<view>确认密码：</view><input id="qr" type="password" placeholder="请确认新密码" v-model="newPassword2">
			</view>
	        
			
	   
	    </view>
		
		<view class="updatedpassword-btn" @click="updatedPasswordForm">
			确定
		</view>
	</view>
</template>

<script>
	import {updatedPassword} from "../../api/index.js"
	export default {
		data() {
			return {
				password:'',
				newPassword:'',
				newPassword2:''
			}
		},
		methods: {
			//提交修改密码
			updatedPasswordForm(){
			console.log(999);
				//判断输入的是否为空
				if( !this.password.trim() || !this.newPassword.trim() || !this.newPassword2.trim() ) {
					uni.showToast({
						icon:'error',
						title:"输入不能为空"
					})
					return;
				}
				if(this.oldPwd === this.newPwd) {
					console.log(111);
					// 组合数据把旧密码和新密码发送给后端
					let obj = {
						oldPwd:this.password,
						newPwd:this.newPassword,
					}
					// 调用接口发送obj
					updatedPassword(obj).then(res=>{
						if(res.data.status === 0){
							uni.showToast({
								title:"修改成功"
							})
							// 清空本地存储的token 和 userInfo
							uni.removeStorageSync("token")
							uni.removeStorageSync("userInfo")
							setTimeout(()=>{
								// 修改成功 跳转到login页面
								uni.reLaunch({
									url:"/pages/login/login"
								})
							},600)
						} else {
							uni.showToast({
								title:"修改失败"
							})
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.page{
    background-color: rgb(242, 242, 242);
    width: 100%;
    height: 100vh;
    .register-form{
        width: 85%;
        height: 350rpx;
        padding: 20rpx;
        border-radius: 40rpx;
		margin-left: 30rpx;
		.input-container{
			width: 95%;
			height: 120rpx;
			line-height: 80rpx;
			text-align: left;
			background-color: #ffffff;
			margin: 80rpx auto 0;
			border-radius: 20rpx;
			display: flex;
			align-items: center;
		}
		input{
			padding-left: 5rpx;
		}
		#id{
			display: block;
		}
    }
	.updatedpassword-btn{
		width: 85%;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		background-color: rgb(224, 7, 36);
		margin: 80rpx auto 0;
		margin-top: 180px;
		border-radius: 40rpx;
		color:#fff;
	}
}
</style>
